<template>
    <div class=''>
        <div class="title">
            <img style="height: 30px; width: 30px; margin-left: 10px;" src="@/assets/menuListLogo/com.lianjia.beike.png">
            <span style="padding-left: 10px;">贝壳</span>
        </div>
        <div class="line"></div>
        <div class="list_content" ref="list" @scroll="handleScroll">
            <div class="list_item" v-for="(item, idx) in messageList" :key="idx" @click="toMessageDetail(item.convid)">
                <div class="imgDiv">
                    <img src="@/assets/addApp/no.jpg" />
                </div>
                <div class="item_div">
                    <div class="item_name">{{ item.convid }}</div>
                    <div class="item_content" v-show="bracketHandler(item.msgcontent)">{{ item.msgcontent }}</div>
                </div>
                <!-- <div class="item_count">{{$t('wechat.number')}}:{{ item.cnt }}</div> -->
            </div>
            <div v-show="showLoading">
                <el-divider>{{loadingText}}</el-divider>
            </div>
        </div>
    </div>
</template>

<script>
import { getChatListApi, getChatValueApi } from '@/api/addApp/beike_api.js'
import { throttle } from 'lodash';
export default {
    props: ['sendData'],
    data() {
        return {
            offset: 1,
            limit: 20,
            messageList: [],
            list: [],
            loadingText: '正在加载中...',
            showLoading: false,//控制加载文本的显示
        };
    },
    components: {
    },
    created() {
    },
    mounted() {
        this.getMessageList();
    },
    methods: {
        //判断是否滚到底部 触发条件
        handleScroll: throttle(function () {
            const list = this.$refs.list;
            // 判断滚动到底部
            if (list.scrollTop + list.clientHeight + 10 + 10 >= list.scrollHeight) {

                this.showLoading = true;
                if (this.list.length == this.limit) {
                    this.loadingText = '正在加载. . .';
                    this.offset++
                    this.getMessageList();
                } else {
                    this.loadingText = '到底了 没有更多了！';
                }
            }
        }),
        //获取聊天列表
        async getMessageList() {
            let data = {
                proof_num: this.sendData.proof_num,
                uid: this.sendData.nick,
                offset: this.offset,
                limit: this.limit
            }
            try {
                let list = await getChatListApi(data);
                this.list = list.data
                this.messageList.push(...list.data)
            } catch (error) {
                console.error(error);
            }
        },
        //跳转到消息详情页
        toMessageDetail(id) {
            this.$emit('toDetail', id)
        },
        //里面含有括号就不显示
        bracketHandler(data) {
            if (data && data.includes('{')) {
                return false
            } else {
                return true
            }
        }
    },
};
</script>

<style lang='scss' scoped>
.title {
    height: 50px;
    background-color: #2b2f3a;
    margin-bottom: 10px;
    font-size: 15px;
    color: #fff;
    display: flex;
    align-items: center;

}

.line {
    height: 1px;
    background-color: #f2f2f2;
}

.list_content {
    height: 760px;
    overflow-y: auto;
    overflow-x: hidden;
    .list_item {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        position: relative;
        border-bottom: 1px solid #f2f2f2;
        transition: transform 0.3s, background-color 0.3s;

        .imgDiv {
            width: 60px;
            height: 60px;

            img {
                border-radius: 10px;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .item_div {
            margin-left: 10px;

            .item_name {
                font-weight: 900;

            }

            .item_content {
                max-width: 262px;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                text-overflow: ellipsis;
                font-size: 12px;

            }
        }


        .item_count {
            position: absolute;
            right: 25px;

        }
    }

    .list_item:hover {
        transform: scale(1.1);
        background-color: rgb(239, 243, 243);
    }
}

@media screen and (min-width: 2360px) {
    .list_content {
        height: 715px;
    }
}

@media screen and (min-width: 2561px) {
    .list_content {
        height: 580px;
    }
}</style>